<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <script src="scripts/snap.svg.js"></script>
</head>

<body>

<svg id="svgout" width="900" height="850" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <rect x="100" y="100" width="90" height="90" stroke="black" fill="transparent" stroke-width="5"/>
    <text x="140" y="160" font-size="40" text-anchor="middle" fill="black">SVG</text>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

    <circle cx="350" cy="150" r="50" stroke="red" fill="transparent" stroke-width="5"/>
    <ellipse cx="600" cy="150" rx="50" ry="20" stroke="red" fill="transparent" stroke-width="5"/>

    <defs>
<!--        <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto" markerUnits="userSpaceOnUse">-->
<!--            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:#000000;"  />-->
<!--        </marker>-->
        <marker id="markerArrow" markerWidth="10" markerHeight="7"
                refX="0" refY="3.5"  orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" />
        </marker>
    </defs>
    <defs>
        <marker id="arrowhead" markerWidth="10" markerHeight="7"
                refX="0" refY="3.5" orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" />
        </marker>
    </defs>

    <line x1="0" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5"
          marker-end="url(#arrowhead)" marker-start="url(#arrowhead)" />


    <path d='M200,150 L260,150' stroke='#000'  style="marker-end: url(#markerArrow);" stroke-width="3"></path>
<!--    <line x1="200" x2="300" y1="150" y2="150" stroke="black" fill="transparent" stroke-width="5"/>-->
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
              stroke="orange" fill="transparent" stroke-width="5"/>

    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
             stroke="green" fill="transparent" stroke-width="5"/>

    <path d="M120,250 Q140,305 150,230 T190,230" fill="none" stroke="blue" stroke-width="5"/>
<!--    <path d="M10 10 H 90 V 90 H 10 L 10 10"/>-->

    <path d="M100 300 H 200 V 400 H 100 L 100 300"/>
    <!-- Points -->
    <circle cx="100" cy="300" r="2" fill="red"/>
    <circle cx="200" cy="300" r="2" fill="red"/>
    <circle cx="200" cy="400" r="2" fill="red"/>
    <circle cx="100" cy="400" r="2" fill="red"/>

    <path d="M500 300 V350 H 580 V 450" fill="none" stroke-width="1" style="marker-end: url(#markerArrow);" stroke='#000' />
<!--    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>-->
    <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>
    <script>
        let s = Snap("#svgout");
        let offset = 50;
        let g = s.g().attr({ stroke: 'gray' });
        for (let i = 0; i <=1600 / offset; i++) {
            g.line(i * offset, 0, i * offset, 1600)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.line(0, i * offset, 1600, i * offset)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.text(0, i * offset, i * offset);
            g.text(i * offset, 20, i * offset);
        }
    </script>
</body>

</html>